<template>
  <el-dialog
    title="数据导入"
    :visible.sync="visible"
    width="500px"
    :close-on-click-modal="false"
    :before-close="handleClose"
    append-to-body
  >
    <el-upload
      :show-file-list="false"
      accept="application/x- www-form-urlencoded, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel,.csv,text/plain,application/pdf,application/x-zip-compressed,application/octet-stream"
      :action="action"
      :data="dataForm"
      :on-success="fileUploadSuccess"
      :on-error="fileUploadError"
      :disabled="excelBtnText=='正在导入'"
      :before-upload="beforeFileUpload"
      style="display: inline"
    >
      <el-button
        type="success"
        :loading="excelBtnText=='正在导入'"
      >
        <i style="margin-right: 5px">{{ excelBtnText }}</i>
      </el-button>
    </el-upload>
    <a
      href="../../excel/import_student_template.xlsx"
      download="学生信息导入模板.xlsx"
    >下载Excel模板</a>
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
        visible: false,
        btnLoading: false,
        excelBtnText: '选择Excel',
        action: this.$http.requestUrl('/stu/student/excelImport'),
        dataForm: {
          token: `${this.$cookie.get('token')}`
        }
      }
    },
    methods: {
      init () {
        this.visible = true
        this.$nextTick(() => {
        })
      },
      fileUploadSuccess (response, file, fileList) {
        if (response) {
          this.$message({type: response.status, message: response.msg})
        }
        this.excelBtnText = '选择Excel'
        this.$emit('refreshDataList')
        this.visible = false
      },
      fileUploadError (file, fileList) {
        this.$message({type: 'error', message: '导入失败!'})
        this.excelBtnText = '选择Excel'
      },
      beforeFileUpload (file) {
        this.excelBtnText = '正在导入'
      },
      handleClose (done) {
        done()
      }
    }
  }
</script>
